import { deviceTreeControllerDeviceTree as getTreeList } from '@/services/ess/deviceTree';
import { stationControllerGetStation as getDetail } from '@/services/ess/station';
import { useRequest } from 'ahooks';
import { Spin } from 'antd'; // 引入 Spin 组件
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useLocation, useModel } from 'umi';
import HistoryData from './components/HistoryData';
import TreeList from './components/Tree2';
import Styles from './index.less';

const App: React.FC = () => {
  const treeRefs = useRef();
  const { initialState } = useModel('@@initialState');
  const id = Number(initialState?.stationId);

  const [isArea, setIsArea] = useState<boolean | undefined>(undefined);
  const [historyDataParams, setHistoryDataParams] = useState({
    nodeType: '',
    deviceType: '',
    deviceCode: '',
    areaId: '',
    isArea: undefined as boolean | undefined,
  });
  const location = useLocation();
  const [defaultExpandedKeys, setDefaultExpandedKeys] = useState<string[]>([]);
  const [defaultSelectedKeys, setDefaultSelectedKeys] = useState<string[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const { loading } = useRequest(() =>
    getTreeList({
      needGroupNode: 'true',
    }),
  );

  useEffect(() => {
    if (id) {
      getDetail({ id }).then((res) => {
        if (res && res.data) {
          console.log('res.data', res.data);
          setIsArea(res.data.isArea);
        }
      });
    }
  }, [id]);

  // Update historyDataParams whenever isArea changes
  useEffect(() => {
    setHistoryDataParams((prev) => ({
      ...prev,
      isArea,
    }));
  }, [isArea]);

  const treeClick = useCallback(
    (
      deviceCode: string,
      TreeALL: any,
      deviceType: string | number | null,
      nodeType: string,
      areaId: string | undefined,
    ) => {
      setHistoryDataParams((prev) => ({
        ...prev,
        nodeType,
        deviceType: deviceType as string,
        deviceCode,
        areaId: areaId || '',
      }));
    },
    [],
  );

  // Simulate receiving a key from outside and set it to defaultExpandedKeys
  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const externalKey = params.get('key') || 'node_0';
    if (externalKey !== null) {
      setDefaultExpandedKeys([externalKey]);
      setDefaultSelectedKeys([externalKey]);
    }
  }, []);

  console.log('historyDataParams', historyDataParams, selectedKeys);

  return (
    <Spin spinning={loading}>
      {/* 使用 Spin 组件包裹内容 */}
      <div className={Styles.contentWrap}>
        <div className={Styles.left}>
          <TreeList
            handleClick={treeClick}
            ref={treeRefs}
            defaultExpandedKeys={defaultExpandedKeys}
            defaultSelectedKeys={defaultSelectedKeys}
            onNodeSelect={setSelectedKeys}
          />
        </div>
        <div className={Styles.right}>
          <HistoryData {...historyDataParams} selectedKeys={selectedKeys} />
        </div>
      </div>
    </Spin>
  );
};

export default App;
